<template>
  <div class="qForm">
    <Form ref="orderData" :label-width="80">
   <!--   <FormItem label="选择店铺" prop="shop">
        <Select v-model="shop" style="width: 660px">
          <Option v-for="item in shopList" :value="item.id" placeholder="请选择店铺" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>-->
      <FormItem label="商品信息" prop="shopList">
        <div  v-if="_props.suit == 'suit'">
          <div class="keyword">
            <ul>
              <li style="margin-right: 148px">
                SKU ID
                <img style="width: 14px;height: 14px;cursor: pointer" src="../assets/skuid-help.png" @click="showUidHelp" />
              </li>
              <li style="margin-right: 126px">关键词</li>
              <li style="margin-right: 48px">套餐数</li>
              <li>备注</li>
            </ul>
            <div class="keyword-input" v-for="(item, index) in suitData" :key="index">
              <Input @on-change="changeInput(index)" size="small" style="width: 204px; margin-right: 5px;" v-model="item.sku_number" />
              <Input @on-change="changeInput(index, $event)" size="small" :maxlength="16" style="width: 160px; margin-right: 5px;" v-model="item.keyword" />
              <InputNumber @on-change="changeInput(index)" size="small"  style="width: 80px; margin-right: 5px;" :min="0" v-model="item.package_count"></InputNumber>
              <Input @on-change="changeInput(index)" size="small" style="width: 108px; margin-right: 5px;" v-model="item.remark" />
              <Button size="small" type="primary" @click="infoDel(index)" v-if="index !== suitData.length-1">
                <img src="../assets/del.png" />
              </Button>
             <!-- <Button size="small" type="primary" v-else @click="infoAdd">
                <img src="../assets/add.png" />
              </Button>-->
             <!-- <Button style="margin-left: 15px;width: 80px" :class="{ activeInfo: item.valid }" size="small" type="warning" @click="validInfo(item)">验证</Button>-->
            </div>
          </div>
          <p style="color: #CC3E3E">注：同一店铺商品添加套餐时请一次添加完成，勿多次添加。</p>
        </div>
        <div v-if="_props.suit == 'order'">
          <div class="keyword">
            <ul>
              <li style="margin-right: 42px">
                SKU ID
                <img style="width: 14px;height: 14px;cursor: pointer" src="../assets/skuid-help.png" @click="showUidHelp" />
              </li>
              <li style="margin-right: 65px">关键词</li>
              <li style="margin-right: 33px">商品关注</li>
              <li style="margin-right: 33px">加购物车</li>
              <li style="margin-right: 33px">店铺关注</li>
              <li>备注</li>
            </ul>
            <div class="keyword-input" v-for="(item, index) in orderData" :key="index">
              <Input @on-change="changeInput(index)" size="small" style="width: 98px; margin-right: 5px;" v-model="item.sku_number" />
              <Input @on-change="changeInput(index, $event)" size="small" :maxlength="16" style="width: 98px; margin-right: 5px;" v-model="item.keyword" />
              <InputNumber @on-change="changeInput(index)" size="small"  style="width: 80px; margin-right: 5px;" :min="5" v-model="item.good_attention_count"></InputNumber>
              <InputNumber @on-change="changeInput(index)" size="small" style="width: 80px; margin-right: 5px;" :min="5" v-model="item.add_cart_count"></InputNumber>
              <InputNumber @on-change="changeInput(index)" size="small" style="width: 80px; margin-right: 5px;" :min="5" v-model="item.shop_attention_count"></InputNumber>
              <Input @on-change="changeInput(index)" size="small" style="width: 100px; margin-right: 5px;" v-model="item.remark" />
              <Button size="small" type="primary" @click="infoDel(index)" v-if="index !== orderData.length-1">
                <img src="../assets/del.png" />
              </Button>
             <!-- <Button size="small" type="primary" v-else @click="infoAdd">
                <img src="../assets/add.png" />
              </Button>-->
            <!--  <Button style="margin-left: 15px;width: 80px" :class="{ activeInfo: item.valid }" size="small" type="warning" @click="validInfo(item)">验证</Button>-->
            </div>
          </div>
          <p style="color: #CC3E3E">注：订单当天发布截止时间21：00</p>
        </div>
      </FormItem>
      <FormItem label="开始日期" prop="startDate">
        <DatePicker type="date" @on-change="changeDate" placeholder="开始日期" style="width: 180px"></DatePicker>
      </FormItem>
      <FormItem label="结束日期" prop="endDate">
        <DatePicker type="date" @on-change="changeEndDate" placeholder="结束日期" style="width: 180px"></DatePicker>
      </FormItem>
     
      
      <FormItem label="合计京币" prop="point">
        {{point}}京币
      </FormItem>
      <FormItem>
        <Button size="large" type="primary" @click="showSubmitModal">创建订单</Button>
      </FormItem>
    </Form>
  
    <Modal
      v-model="showInfo"
      title="信息验证"
      width="400"
      :mask-closable="false"
      className="foot-hide"
      :styles="{top: '200px'}">
      <div style="font-size: 16px;">
        <p>宝贝名： xxxxxx</p>
        <p>店铺名称： xxxxxx</p>
        <p>价格： xxxxxx</p>
      </div>
      <Button style="float: right;margin-top: 20px" type="primary" @click="closeDialog('showInfo')">确定</Button>
      <br />
      <br />
      <div slot="footer"></div>
    </Modal>
  
    <Modal
      v-model="showHelp"
      title="SKUID帮助"
      width="580"
      :mask-closable="false"
      className="foot-hide"
      :styles="{top: '200px'}">
      <div style="margin-top: 20px;text-align: center;">
        <img style="width: 100%" src="../assets/sukid-tip.png"/>
      </div>
      <div slot="footer"></div>
    </Modal>
  
    <Modal
      v-model="showSuccess"
      width="240"
      :closable="false"
      :mask-closable="false"
      className="foot-hide"
      :styles="{top: '200px'}">
      <img  style="width: 90px;height: 90px;margin: 0 auto;display: block" src="../assets/pop/correct.png"/>
      <div style="margin-top: 20px;text-align: center; color: #333;font-size: 16px;">
        支付成功!
      </div>
      <div style="margin-top: 30px; text-align:center;">
        <Button shape="circle" type="success" @click="closeDialog('showSuccess')">我知道了</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
    
   
    <Modal
      v-model="showSubmit"
      title="订单支付"
      width="400"
      className="foot-hide"
      :mask-closable="false"
      :styles="{top: '200px'}">
      <div style="margin-top: 20px; margin-bottom: 35px;text-align: center;">
        <p style="font-size: 18px;">订单总额：{{point}}京币</p>
        <p style="font-size: 18px;margin-bottom: 20px">账户余额：{{$auth.user().bean_count/100}}京币</p>
        <div style="float: right" v-if="point">
          <Button type="primary" size="large" @click="submit">
            <span>确认支付</span>
          </Button>
        </div>
        <div style="position:absolute;left: 137px" v-else>
          <a style="color: #E84F29;font-size: 18px;border-bottom: 1px solid #E84F29;" @click="monenyAdd">请先去充值点数</a>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
    
    
  </div>
</template>

<script>
  export default {
    name: 'qForm',
    props: ['suit', 'type'],
    data() {
      return {
        requestUrl: '',
        price: {
          cart: 0,
          goods: 0,
          package: 0,
          shopFollow: 0
        },
        dateRange: 1,
        shopList: [],
        showHelp: false,
        showInfo: false,
        showSubmit: false,
        showSuccess: false,
        shop: '',
        startDate: '',
        endDate: '',
        orderData: [
          {
            // valid: false,
            sku_number: '86569874569',
            keyword: '222222',
            good_attention_count: 5,
            add_cart_count: 5,
            shop_attention_count: 5,
            remark: ''
          },
        ],
        suitData: [
          {
            // valid: false,
            sku_number: '',
            keyword: '',
            package_count: 0,
            remark: ''
          }
       ]
      }
    },
    computed: {
      point: function () {
        if (this.suit == 'order') {
          let shangCount = 0,
              buyCount = 0,
              shopCount = 0;
          this.orderData.forEach(function (it) {
            shangCount += it.good_attention_count
            buyCount += it.add_cart_count
            shopCount += it.shop_attention_count
          })
          return (this.price.goods * shangCount + this.price.cart * buyCount + this.price.shopFollow * shopCount) * this.dateRange / 100
        } else {
          let suitCount = 0;
          this.suitData.forEach(function (it) {
            suitCount += it.package_count
          })
          return (this.price.package * suitCount) * this.dateRange / 100
        }
      }
    },
    methods: {
      submit () {
        this.showSubmit = false
      
      //  let list = []
        if (this.suit == 'order') {
         /* this.orderData.forEach( (it)=> {
            delete it.valid
            list.push(it)
          })*/
         
          let data = {
            "begin_time": this.startDate,
            "end_time": this.endDate,
            "orders": this.orderData,
            //  "shop_id": this.shop
          };
          this.$http({
            method: 'put',
            url: this.requestUrl,
            data: data
          })
          .then(res => {
            this.$api.paySubmit({
              "package_id": res.data,
              "variety": this.type
            })
            .then(res => {
              setTimeout( ()=> {
                this.showSuccess = true
              }, 500)
            }).catch(err => {
                if (err.response) {
                    this.$Message.error(err.response.data);
                }
            });
          }).catch(err => {
            if (err.response) {
              this.$Message.error(err.response.data);
            }
          });
        } else {
        
       /*   this.suitData.forEach( (it)=> {
            delete it.valid
            list.push(it)
          })*/
          let data = {
            "begin_time": this.startDate,
            "end_time": this.endDate,
            "orders": this.suitData,
            //  "shop_id": this.shop
          };
          this.$http({
            method: 'put',
            url: this.requestUrl,
            data: data
          })
          .then(res => {
  
            this.$api.paySubmit({
              "package_id": res.data,
              "variety": this.type
            })
            .then(res => {
              setTimeout( ()=> {
                this.showSuccess = true
              }, 500)
            }).catch(err => {
              if (err.response) {
                this.$Message.error(err.response.data);
              }
            });
          }).catch(err => {
            this.$Message.error(err.response.data);
          });
        }
      },
      showSubmitModal () {
        let idArr = [],
            keyArr = [],
            check = false;
        if (this.suit == 'order') {
          this.orderData.forEach( (it)=> {
            if (it.sku_number == '' || it.keyword == '') {
              this.$Message.error('SKU ID 和 关键词 不能为空');
              check = true
            }
            idArr.push(it.sku_number)
            keyArr.push(it.keyword)
          })
          if (check) {
            return
          }
          if (new Set(idArr).size !== this.orderData.length) {
            this.$Message.error('SKU ID 重复，请确认');
          } else if (new Set(keyArr).size !== this.orderData.length) {
            this.$Message.error('关键词重复，请确认');
          } else  if (this.startDate.localeCompare(this.endDate) == 1 || this.startDate == '' || this.startDate == ''  ) {
            this.$Message.error('结束日期必须大于开始日期');
          } else {
            this.showSubmit = true
          }
        } else {
          this.suitData.forEach( (it)=> {
            if (it.sku_number == '' || it.keyword == '' || it.package_count == 0) {
              this.$Message.error('SKU ID、关键词和套餐数不能为空或0');
              check = true
            }
            idArr.push(it.sku_number)
            keyArr.push(it.keyword)
          })
          if (check) {
            return
          }
          if (new Set(idArr).size !== this.suitData.length) {
            this.$Message.error('SKU ID 重复，请确认');
          } else if (new Set(keyArr).size !== this.suitData.length) {
            this.$Message.error('关键词重复，请确认');
          } else  if (this.startDate.localeCompare(this.endDate) == 1 || this.startDate == '' || this.startDate == ''  ) {
            this.$Message.error('结束日期必须大于开始日期');
          } else {
            this.showSubmit = true
          }
        }
      },
      infoAdd () {
        if (this.suit == 'order' && this.orderData.length < 10) {
          this.orderData.unshift(
            {
              // valid: false,
              sku_number: '',
              keyword: '',
              good_attention_count: 5,
              add_cart_count: 5,
              shop_attention_count: 5,
              remark: ''
            }
          )
        } else if (this.suit == 'suit' && this.suitData.length < 10) {
          this.suitData.unshift(
            {
              // valid: false,
              sku_number: '',
              keyword: '',
              package_count: 0,
              remark: ''
            }
          )
        } else {
          this.$Message.error('最多添加10条');
        }
      },
      infoDel (index) {
        if (this.suit == 'order') {
          this.orderData.splice(index, 1)
        } else {
          this.suitData.splice(index, 1)
        }
      },
      changeDate (val) {
        this.startDate = val
        if (this.endDate !== '') {
          this.dateRange = (Date.parse(this.endDate) - Date.parse(this.startDate)) / 86400000
        }
      },
      changeEndDate (val) {
        this.endDate = val
        if (this.startDate !== '') {
          this.dateRange = (Date.parse(this.endDate) - Date.parse(this.startDate)) / 86400000
        }
      },
      showUidHelp () {
          this.showHelp = true
      },
      closeDialog(name) {
        this[name] = false
      },
      validInfo (item) {
        this.showInfo = true
        item.valid = true
      },
      changeInput (index, e) {
        if (e !== undefined) {
          if (e.target.value.length == 16 ) {
            this.$Message.error('最多输入16个字符');
          }
        }
        if (this.suit == 'order') {
            this.orderData[index].valid = false
        } else {
          this.suitData[index].valid = false
        }
      },
      monenyAdd () {
        this.$router.push({ name: 'MoneyAddPage'})
      }
    },
  
    
    mounted: function () {
      //获取购物车价格
      this.$api.getCart()
      .then(res => {
        this.price.cart = res
      }).catch(err => {
        console.log(err)
      });
      //商品关注价格
      this.$api.getGoods()
      .then(res => {
        this.price.goods = res
      }).catch(err => {
        console.log(err)
      });
      //套餐价格
      this.$api.getPackage()
      .then(res => {
        this.price.package = res
      }).catch(err => {
        console.log(err)
      });
      //店铺关注价格
      this.$api.getShopFollow()
      .then(res => {
        this.price.shopFollow = res
      }).catch(err => {
        console.log(err)
      });
      
      /**
       * 获取店铺信息
       */
     /* this.$api.shopGet()
      .then(res => {
        this.shopList = res
        
      }).catch(err => {
        console.log(err)
      });*/
      
     switch (this.type) {
          case 'pc':
            if (this.suit == 'order') {
                this.requestUrl = '/pcOrder/pc'
            } else {
              this.requestUrl = '/pcOrder/pc/package'
            }
            break;
          case 'app':
            if (this.suit == 'order') {
              this.requestUrl = '/appOrder/app'
            } else {
              this.requestUrl = '/appOrder/app/package'
            }
            break;
          case '':
            break
            
        }
      
    },
  }
</script>

<style lang="less">
  .activeInfo {
    background: #B9AB9B !important;
    border-color: #B9AB9B !important;
  }
  .qForm {
    .ivu-form-item-content {
      font-size: 14px;
    }
    .ivu-form .ivu-form-item-label {
      font-size: 14px;
      color: #1A1A1A;
      text-align: left;
    }
    .keyword {
      border: 1px solid #CCCCCC;
      border-radius: 5px;
      width: 660px;
      font-size: 14px;
     // max-height: 400px;
    //  overflow: auto;
      ul {
        padding: 0 16px;
        height: 40px;
        border-bottom: 1px solid #ccc;
        li {
          float: left;
          height: 40px;
          line-height: 40px;
        }
      }
      &-input {
        height: 60px;
        line-height: 60px;
        padding-left: 14px;
      }
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
      &-add {
        background: #F5933E;
        border-radius: 5px;
        height: 32px;
        line-height: 32px;
        width: 32px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
